<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../css/clear.css">
	<link rel="stylesheet" href="../css/first.css">
	<link rel="stylesheet" href="http:////at.alicdn.com/t/font_2843535_9hl4mvt9is7.css">
	<title>首页</title>
</head>

<body>
	<header>

	</header>
	<!-- banner -->
	<div id="box">
		<img id="imgId1" src="../img/1.jpg" />
		<img id="imgId2" src="../img/2.jpg" />
		<img id="imgId3" src="../img/3.jpg" />
		<ul id="btns">
			<li></li>
			<li></li>
			<li></li>

		</ul>
		<div id="leftBtn" style="font-size: 30px;position: absolute;left: 0px;top: 50%;margin-top: -20px;
    left: 20px;
	cursor: pointer;
	color: #FFF;
    
    ">＜</div>
		<div id="rightBtn" style="font-size: 30px;position: absolute;
	left: 1474px;
	top: 50%;
    margin-top: -20px;
	cursor: pointer;
	color: #FFF;
    ;">＞</div>
	</div>
	<!-- 所有商品 -->
	<div class="goods">
		<div class="one">
			<div class="all-goods">
				<p>所 有 商 品</p>
				<p class="english">A l l&nbsp;&nbsp;&nbsp;&nbsp;C o m m o d i t y</p>
				<i class="iconfont icon-xiangxiazhanhang" style="font-size: 22px;"></i>
			</div>
			<div class="goods-box1">
				<div class="box1-top-img">
					<img src="../img/2.webp">
				</div>
				<div class="beautiful">
					<p>美之器物</p>
					<p class="english">B e a u t i f u l &nbsp;&nbsp;&nbsp;&nbsp;U t e n s i l</p>
				</div>
				<div class="box1-goods-img">
					<ul class="xuanran1">
						<li><a href="../html/goods.html">
								<img src="../img/3.webp" alt="" style="width: 252px;
									height: 252px;">
								<p>公道杯</p>
								<p>￥199.00</p>
							</a>
						</li>
						<li>
							<img src="../img/4.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>紫砂壶</p>
							<p>￥500.00</p>
						</li>
						<li>
							<img src="../img/5.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>老铁壶</p>
							<p>￥19.999.00</p>
						</li>
						<li>
							<img src="../img/6.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>天目盏</p>
							<p>￥300.00</p>
						</li>
					</ul>
					<ul>
						<li>
							<img src="../img/7.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>柴烧花器</p>
							<p>￥500.00</p>
						</li>
						<li>
							<img src="../img/8.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>香炉</p>
							<p>￥1.599.00</p>
						</li>
						<li>
							<img src="../img/9.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>茶承</p>
							<p>￥300.00</p>
						</li>
						<li>
							<img src="../img/10.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>茶洗</p>
							<p>￥399.00</p>
						</li>
					</ul>
				</div>

			</div>
			<div style="height: 92px; line-height: 92px;text-align: center	;">
				<i class="iconfont icon-xiangxiazhanhang" style="font-size: 40px;color: #777777;"></i>

			</div>
			<div class="goods-box1">
				<div class="box1-top-img">
					<img src="../img/11.webp">
				</div>
				<div class="beautiful">
					<p>南之嘉木</p>
					<p class="english">C h i n e s e &nbsp;&nbsp;&nbsp;&nbsp;T e a</p>
				</div>

				<div class="box1-goods-img">
					<ul class="xuanran2">
						<li>
							<img src="../img/12.webp" alt="" style="width: 252px;
									height: 252px;">
							<p>洞庭山·碧螺春</p>
							<p>￥700.00</p>

						</li>
						<li>
							<img src="../img/13.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>正山小种</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="../img/14.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>正安白茶</p>
							<p>￥500.00</p>
						</li>
						<li>
							<img src="../img/15.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>铁观音</p>
							<p>￥555.00</p>
						</li>
					</ul>
					<ul>
						<li>
							<img src="../img/16.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>凤凰单枞</p>
							<p>￥599.00</p>
						</li>
						<li>
							<img src="../img/17.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>西湖龙井</p>
							<p>￥600.00</p>
						</li>
						<li>
							<img src="../img/18.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>祁门红茶</p>
							<p>￥499.00</p>
						</li>
						<li>
							<img src="../img/19.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>正安瓜片</p>
							<p>￥555.00</p>
						</li>
					</ul>
				</div>


			</div>
			<div style="height: 92px; line-height: 92px;text-align: center;">
				<i class="iconfont icon-xiangxiazhanhang" style="font-size: 40px;color: #777777;"></i>
			</div>
			<div class="goods-box1">
				<div class="box1-top-img">
					<img src="../img/20.webp">
				</div>
				<div class="beautiful">
					<p>觉之盆景</p>
					<p class="english">B o n s a i</p>
				</div>

				<div class="box1-goods-img">
					<ul class="xuanran3">
						<li>
							<img src="../img/21.webp" alt="" style="width: 252px;
									height: 252px;">
							<p>盆景001</p>
							<p>￥599.00</p>
						</li>
						<li>
							<img src="../img/22.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>盆景002</p>
							<p>￥799.00</p>
						</li>
						<li>
							<img src="../img/23.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>盆景003</p>
							<p>￥666.00</p>
						</li>
						<li>
							<img src="../img/24.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>盆景004</p>
							<p>￥799.00</p>
						</li>
					</ul>
					<ul>
						<li>
							<img src="../img/25.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>盆景005</p>
							<p>￥1.999.00</p>
						</li>
						<li>
							<img src="../img/26.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>盆景006</p>
							<p>￥799.00</p>
						</li>
						<li>
							<img src="../img/27.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>盆景007</p>
							<p>￥8.888.00</p>
						</li>
						<li>
							<img src="../img/28.webp" alt="" style="width: 252px;
								height: 252px;">
							<p>盆景008</p>
							<p>￥8.999.00</p>
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>
	</div>
	<footer>

	</footer>

</body>

</html>
<script src="../js/jQuery.js"></script>
<script>
	var arr = ["1.jpg", "2.jpg", "3.jpg"];
	var ord = 0; //代表当前图片的序号，从0开始。
	var myTimer = null;

	function initUI() {
		$("#box li:first").css({
			"backgroundColor": "white"
		});
	}

	function initEvent() {
		$("#box").mouseenter(function () {
			stopPlay();
		});

		$("#box").mouseleave(function () {
			autoPlay();
		});

		$("#box li").click(function () {
			goImg($("#box li").index(this));
		});

		$("#leftBtn").click(function () {
			let transord = ord - 1;
			transord = transord < 0 ? arr.length - 1 : transord;
			goImg(transord);
		});

		$("#rightBtn").click(function () {
			let transord = ord + 1;
			transord = transord > arr.length - 1 ? 0 : transord;
			goImg(transord);
		});
	}

	//1、自动播放
	function autoPlay() {
		myTimer = setInterval(function () {
			//一、改变数据
			// 1、记录当前序号（淡出的图片序号）
			let outOrd = ord;
			//2、改变要显示的图片的序号（淡出图片序号加一）
			ord++;
			if (ord > arr.length - 1) {
				ord = 0;
			}
			//二、改变外观
			let $img = $("#box img");
			//1、淡入淡出效果
			//让一张(outOrd)淡出 当前消失
			$img.eq(outOrd).animate({
				"opacity": 0
			}, 3000);
			//让一张(ord)淡入下一张图片显示
			$img.eq(ord).animate({
				"opacity": 1
			}, 3000);
			//2、改变豆豆的颜色；
			$("#box li").eq(ord).css({
				"backgroundColor": "white"
			}).siblings().css({
				"backgroundColor": "gray"
			});
		}, 3000);
	}

	//2、停止播放
	function stopPlay() {
		window.clearInterval(myTimer);
	}

	//3、跳转到指定的图片
	function goImg(transOrd) {
		//一、改变数据
		// 1、记录当前序号（淡出的图片序号）
		let outOrd = ord;
		//2、改变要显示的图片的序号（传入的图片序号）
		ord = transOrd;
		if (ord > arr.length - 1) {
			ord = 0;
		}
		//二、改变外观
		let $img = $("#box img");
		//1、淡入淡出效果
		//让一张(outOrd)淡出 当前消失
		$img.eq(outOrd).animate({
			"opacity": 0
		}, 2000);
		//让一张(ord)淡入下一张图片显示
		$img.eq(ord).animate({
			"opacity": 1
		}, 2000);
		//2、改变豆豆的颜色；
		$("#box li").eq(ord).css({
			"backgroundColor": "white"
		}).siblings().css({
			"backgroundColor": "gray"
		});
	}

	$(function () {
		//1、初始化界面
		initUI();
		//2、绑定事件
		initEvent();
		//3、自动播放
		autoPlay();
	});



	// 引入header
	$("header").load("header.html");
	// 引入footer
	$("footer").load("footer.html");

	// $.ajax({
	// 	url: '../php/qiwu.php',
	// 	type: 'get',
	// 	success: function (resText) {
	// 		getData(resText)
	// 	}
	// });

	// function getData(resText) {
	// 	console.log(resText);
	// }
	// $.ajax({
	// 	url: '../php/jiamu.php',
	// 	type: 'get',
	// 	success: function (resText) {
	// 		getData(resText)
	// 	}
	// });

	// function getData(resText) {
	// 	console.log(resText);
	// }
	// $.ajax({
	// 	url: '../php/penjing.php',
	// 	type: 'get',
	// 	success: function (resText) {
	// 		getData(resText)
	// 	}
	// });

	// function getData(resText) {
	// 	console.log(resText);
	// }
	$.ajax({
		url: "../php/qiwu.php",
		dataType: "get",
		success(data) {
			console.log(data)
			data.forEach(Element => {
				let item = `
         <li>
         <img src="${Element.goodsImg}">
		 <p>${Element.goodsName}</p>
		 <p>${Element.goodsPrice}</p>
         </li>
      `
				$(".xuanran1").append(item);
			})
		}
	})
	$.ajax({
		url: "../php/jiamu.php",
		dataType: "get",
		success(data) {
			console.log(data)
			data.forEach(Element => {
				let item = `
         <li>
         <img src="${Element.userImg}">
		 <p>${Element.userName}</p>
		 <p>${Element.userPrice}</p>
         </li>
      `
				$(".xuanran2").append(item);
			})
		}
	})
	$.ajax({
		url: "../php/penjing.php",
		dataType: "get",
		success(data) {
			console.log(data)
			data.forEach(Element => {
				let item = `
         <li>
         <img src="${Element.userImg}">
		 <p>${Element.userName}</p>
		 <p>${Element.userPrice}</p>
         </li>
      `
				$(".xuanran3").append(item);
			})
		}
	})
</script>